<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<script type="text/javascript" src="js/soundmanager2.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Snareworks MathGrid</title>

<link rel=StyleSheet href="style/MathGrid.css" type="text/css" />

<script type="text/javascript"
            src="js/dojo/dojo.js"
            djConfig="parseOnLoad: true, isDebug: false">
</script>

<script type="text/javascript">
dojo.require('dojo.cookie');
dojo.require('dojo.parser');
dojo.require('snareworks.MathGrid');
dojo.require('dijit.form.TextBox');
dojo.require('dijit.form.NumberSpinner');
dojo.require('dijit.form.RadioButton');
dojo.require('dojox.encoding.digests.MD5');

function loader () {
    mathgrid = new snareworks.MathGrid();
    mathgrid.initialize();
	//window.mathgrid.nextQuestion();
}

function loginPressHdlr(e) {
	mathgrid.login(e);
}

function keyPressHdlr(e) {
	mathgrid.keyPressed(e);
}

function updateOperationHdlr(e) {
	mathgrid.updateOperation(e);
}

dojo.addOnLoad(loader);

soundManager.url = 'swf/';
soundManager.debugMode = false;

soundManager.onerror = function() {
	alert('Failed to initialize sound library.  Sounds will not work.');
}


</script>

</head>
<body class="tundra">

<div id="login" style="display: none; margin-top: 50px; font-size: x-large;">
	<table>
		<tr>
			<td style="text-align: center;">
				What is your secret code? <input dojoType='dijit.form.TextBox' type='password' id='loginBox' onkeypress='loginPressHdlr'></input>
			</td>
		</tr>
		<tr><td style="text-align: center;"><span id="loginMessage" style="display: none;">What??  I don't know that code!!</span></td></tr>
	</table>
</div>

<div id="game" style="display: none;">
	<div id="numDoneDiv"></div>
	<div id="numLeftDiv"></div>
	<table>
		<tr class="question">
			<td style="text-align: center;">
				<div id='question'></div>
				<input dojoType='dijit.form.TextBox' id='answerBox' onkeypress='keyPressHdlr' style="width:50px;"></input>
			</td>
		</tr>
		<tr>
			<td style="text-align: center;">
				<span id='message'></span>
			</td>
		</tr>
	</table>
	
	<table id="gridTable" class="gridTable">
	</table>
</div>

<div id="controls" style="display: none;">
	<table>
		<tr>
			<td>Number of Rows:</td>
			<td>
				<input dojoType="dijit.form.NumberSpinner"
	                value="6"
	                smallDelta="1"
	                constraints="{min:2,max:10,places:0}"
	                maxlength="4"
	                id="numRowsInput" />
			</td>
		</tr>
		<tr>
			<td>First number across:</td>
			<td>
				<input dojoType="dijit.form.NumberSpinner"
	                value="1"
	                smallDelta="1"
	                constraints="{min:1,max:1000,places:0}"
	                maxlength="4"
	                id="colInput" />
			</td>
		</tr>
		<tr>
			<td>First number down:</td>
			<td>
				<input dojoType="dijit.form.NumberSpinner"
	                value="1"
	                smallDelta="1"
	                constraints="{min:1,max:1000,places:0}"
	                maxlength="4"
	                id="rowInput" />
			</td>
		</tr>
		<tr>
			<td colspan="2">
				<input dojoType="dijit.form.RadioButton" id="addition" name="oper" 
		           value="addition" type="radio" /><label for="addition"> Addition </label> 
				<input dojoType="dijit.form.RadioButton" id="subtraction" name="oper" 
		           value="subtraction" type="radio" /><label for="subtraction"> Subtraction </label> 
				<input dojoType="dijit.form.RadioButton" id="multiplication" name="oper" 
		           checked="checked" value="multiplication" type="radio" /><label for="multiplication"> Multiplication </label> 
				<button dojoType='dijit.form.Button' id='updateButton' onclick="updateOperationHdlr">Update</button>
			</td>
		</tr>
	</table>
</div>

</body>
</html>